// 主题配置文件
// 定义应用的颜色、字体、尺寸等主题变量，确保UI风格一致性

export const themeConfig = {
  // 色彩系统 - 慵懒休闲少女风
  colors: {
    // 主色调 - 柔和粉色
    primary: {
      base: '#FF85A2',
      light: '#FFADC6',
      dark: '#E56983',
      contrast: '#FFFFFF'
    },
    
    // 辅助色 - 淡紫色
    secondary: {
      base: '#B794F4',
      light: '#D6BCFA',
      dark: '#9F7AEA',
      contrast: '#FFFFFF'
    },
    
    // 功能色
    success: {
      base: '#9AE6B4',
      light: '#B7E9C7',
      dark: '#68D391',
      contrast: '#FFFFFF'
    },
    
    warning: {
      base: '#FFD6A5',
      light: '#FFE3C7',
      dark: '#FFB74D',
      contrast: '#212121'
    },
    
    error: {
      base: '#FFADAD',
      light: '#FFC6C6',
      dark: '#F56565',
      contrast: '#FFFFFF'
    },
    
    info: {
      base: '#90CDF4',
      light: '#BEE3F8',
      dark: '#4299E1',
      contrast: '#FFFFFF'
    },
    
    // 中性色
    neutral: {
      // 文本颜色
      text: {
        primary: '#4A4A4A',
        secondary: '#8A8A8A',
        disabled: '#BDBDBD',
        hint: '#BDBDBD'
      },
      
      // 背景颜色
      background: {
        default: '#FFF5F7',
        paper: '#FFFFFF',
        disabled: '#F9F9F9'
      },
      
      // 边框颜色
      border: {
        default: '#FFE6EC',
        light: '#FFF0F5',
        dark: '#FFCCD5'
      }
    },
    
    // 特殊功能色
      functional: {
        
        // 活动类型颜色
        activity: {
          study: '#2196F3',
          test: '#4CAF50',
          achievement: '#FF9800',
          streak: '#9C27B0',
          system: '#757575'
        },
      
      // 状态颜色
      status: {
        online: '#4CAF50',
        offline: '#9E9E9E',
        busy: '#FF9800',
        away: '#FFC107'
      }
    }
  },
  
  // 字体系统
  typography: {
    // 字体家族
    fontFamily: {
      regular: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif',
      medium: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif',
      bold: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif'
    },
    
    // 字重
    fontWeight: {
      light: 300,
      regular: 400,
      medium: 500,
      semibold: 600,
      bold: 700
    },
    
    // 字号
    fontSize: {
      xs: '12px',
      sm: '13px',
      base: '14px',
      md: '15px',
      lg: '16px',
      xl: '18px',
      '2xl': '20px',
      '3xl': '24px',
      '4xl': '30px'
    },
    
    // 行高
    lineHeight: {
      tight: 1.2,
      normal: 1.4,
      relaxed: 1.6,
      loose: 1.8
    },
    
    // 标题样式
    h1: {
      fontSize: '24px',
      fontWeight: 700,
      lineHeight: 1.2,
      color: '#212121'
    },
    
    h2: {
      fontSize: '20px',
      fontWeight: 600,
      lineHeight: 1.3,
      color: '#212121'
    },
    
    h3: {
      fontSize: '18px',
      fontWeight: 600,
      lineHeight: 1.3,
      color: '#212121'
    },
    
    h4: {
      fontSize: '16px',
      fontWeight: 600,
      lineHeight: 1.4,
      color: '#333333'
    },
    
    h5: {
      fontSize: '15px',
      fontWeight: 500,
      lineHeight: 1.4,
      color: '#333333'
    },
    
    h6: {
      fontSize: '14px',
      fontWeight: 500,
      lineHeight: 1.4,
      color: '#333333'
    }
  },
  
  // 间距系统
  spacing: {
    xs: '4px',
    sm: '8px',
    base: '12px',
    md: '16px',
    lg: '20px',
    xl: '24px',
    '2xl': '32px',
    '3xl': '40px',
    '4xl': '48px'
  },
  
  // 圆角 - 更圆润的边角
  borderRadius: {
    none: '0px',
    sm: '6px',
    base: '12px',
    md: '16px',
    lg: '20px',
    xl: '24px',
    full: '9999px'
  },
  
  // 阴影 - 柔和的阴影
  shadows: {
    none: 'none',
    sm: '0 2px 4px 0 rgba(255, 133, 162, 0.1)',
    base: '0 4px 8px 0 rgba(255, 133, 162, 0.15), 0 2px 4px 0 rgba(255, 133, 162, 0.1)',
    md: '0 8px 16px -2px rgba(255, 133, 162, 0.2), 0 4px 8px -2px rgba(255, 133, 162, 0.1)',
    lg: '0 12px 24px -4px rgba(255, 133, 162, 0.2), 0 6px 12px -2px rgba(255, 133, 162, 0.1)',
    xl: '0 20px 32px -6px rgba(255, 133, 162, 0.25), 0 8px 16px -4px rgba(255, 133, 162, 0.15)',
    inset: 'inset 0 2px 4px 0 rgba(255, 133, 162, 0.1)'
  },
  
  // 过渡动画
  transitions: {
    duration: {
      shortest: '100ms',
      shorter: '150ms',
      short: '200ms',
      base: '300ms',
      long: '350ms',
      longer: '400ms',
      longest: '500ms'
    },
    
    timing: {
      ease: 'ease',
      'ease-in': 'ease-in',
      'ease-out': 'ease-out',
      'ease-in-out': 'ease-in-out',
      'ease-in-quad': 'cubic-bezier(0.55, 0.085, 0.68, 0.53)',
      'ease-in-cubic': 'cubic-bezier(0.55, 0.055, 0.675, 0.19)',
      'ease-in-quart': 'cubic-bezier(0.895, 0.03, 0.685, 0.22)',
      'ease-in-quint': 'cubic-bezier(0.755, 0.05, 0.855, 0.06)',
      'ease-in-sine': 'cubic-bezier(0.47, 0, 0.745, 0.715)',
      'ease-in-expo': 'cubic-bezier(0.95, 0.05, 0.795, 0.035)',
      'ease-in-circ': 'cubic-bezier(0.6, 0.04, 0.98, 0.335)',
      'ease-out-quad': 'cubic-bezier(0.25, 0.46, 0.45, 0.94)',
      'ease-out-cubic': 'cubic-bezier(0.215, 0.61, 0.355, 1)',
      'ease-out-quart': 'cubic-bezier(0.165, 0.84, 0.44, 1)',
      'ease-out-quint': 'cubic-bezier(0.23, 1, 0.32, 1)',
      'ease-out-sine': 'cubic-bezier(0.39, 0.575, 0.565, 1)',
      'ease-out-expo': 'cubic-bezier(0.19, 1, 0.22, 1)',
      'ease-out-circ': 'cubic-bezier(0.075, 0.82, 0.165, 1)',
      'ease-in-out-quad': 'cubic-bezier(0.455, 0.03, 0.515, 0.955)',
      'ease-in-out-cubic': 'cubic-bezier(0.645, 0.045, 0.355, 1)',
      'ease-in-out-quart': 'cubic-bezier(0.77, 0, 0.175, 1)',
      'ease-in-out-quint': 'cubic-bezier(0.86, 0, 0.07, 1)',
      'ease-in-out-sine': 'cubic-bezier(0.445, 0.05, 0.55, 0.95)',
      'ease-in-out-expo': 'cubic-bezier(1, 0, 0, 1)',
      'ease-in-out-circ': 'cubic-bezier(0.785, 0.135, 0.15, 0.86)'
    }
  },
  
  // 尺寸系统
  size: {
    // 按钮尺寸
    button: {
      xs: {
        height: '24px',
        paddingHorizontal: '8px',
        fontSize: '12px'
      },
      sm: {
        height: '32px',
        paddingHorizontal: '12px',
        fontSize: '13px'
      },
      base: {
        height: '36px',
        paddingHorizontal: '16px',
        fontSize: '14px'
      },
      md: {
        height: '40px',
        paddingHorizontal: '20px',
        fontSize: '15px'
      },
      lg: {
        height: '44px',
        paddingHorizontal: '24px',
        fontSize: '16px'
      },
      xl: {
        height: '48px',
        paddingHorizontal: '28px',
        fontSize: '16px'
      }
    },
    
    // 输入框尺寸
    input: {
      xs: {
        height: '24px',
        paddingHorizontal: '8px',
        fontSize: '12px'
      },
      sm: {
        height: '32px',
        paddingHorizontal: '12px',
        fontSize: '13px'
      },
      base: {
        height: '36px',
        paddingHorizontal: '16px',
        fontSize: '14px'
      },
      md: {
        height: '40px',
        paddingHorizontal: '16px',
        fontSize: '15px'
      },
      lg: {
        height: '44px',
        paddingHorizontal: '16px',
        fontSize: '16px'
      }
    },
    
    // 图标尺寸
    icon: {
      xs: '12px',
      sm: '16px',
      base: '20px',
      md: '24px',
      lg: '32px',
      xl: '40px'
    },
    
    // 头像尺寸
    avatar: {
      xs: '24px',
      sm: '32px',
      base: '40px',
      md: '48px',
      lg: '56px',
      xl: '64px'
    },
    
    // 卡片尺寸
    card: {
      minHeight: '60px',
      padding: '16px'
    }
  },
  
  // 布局系统
  layout: {
    // 导航栏
    navbar: {
      height: '50px',
      paddingHorizontal: '16px'
    },
    
    // 底部栏
    tabbar: {
      height: '56px',
      paddingTop: '6px',
      paddingBottom: '8px'
    },
    
    // 内容区域
    content: {
      paddingHorizontal: '16px'
    },
    
    // 页面间距
    page: {
      paddingBottom: '72px' // 为底部栏留出空间
    }
  },
  
  // 响应式断点
  breakpoints: {
    xs: '0px',
    sm: '360px',
    md: '768px',
    lg: '1024px',
    xl: '1440px'
  },
  
  // Z-index 系统
  zIndex: {
    base: 0,
    dropdown: 1000,
    sticky: 1100,
    fixed: 1200,
    modalBackdrop: 1300,
    modal: 1400,
    popover: 1500,
    tooltip: 1600,
    notification: 1700
  },
  
  // 特殊效果
  effects: {
    // 毛玻璃效果
    glassmorphism: {
      background: 'rgba(255, 255, 255, 0.7)',
      backdropFilter: 'blur(10px)',
      border: '1px solid rgba(255, 255, 255, 0.3)'
    },
    
    // 暗黑模式毛玻璃
    darkGlassmorphism: {
      background: 'rgba(33, 33, 33, 0.7)',
      backdropFilter: 'blur(10px)',
      border: '1px solid rgba(255, 255, 255, 0.1)'
    },
    
    // 渐变
    gradients: {
      primary: 'linear-gradient(135deg, #FF85A2 0%, #FFADC6 100%)',
      secondary: 'linear-gradient(135deg, #B794F4 0%, #D6BCFA 100%)',
      success: 'linear-gradient(135deg, #9AE6B4 0%, #B7E9C7 100%)',
      warning: 'linear-gradient(135deg, #FFD6A5 0%, #FFE3C7 100%)',
      error: 'linear-gradient(135deg, #FFADAD 0%, #FFC6C6 100%)',
      info: 'linear-gradient(135deg, #90CDF4 0%, #BEE3F8 100%)',
      activity: 'linear-gradient(135deg, #FF85A2 0%, #B794F4 100%)',
      softRainbow: 'linear-gradient(135deg, #FF85A2 0%, #B794F4 25%, #90CDF4 50%, #9AE6B4 75%, #FFD6A5 100%)'
    }
  },
  
  // 动画预设
  animations: {
    // 新增更多动态效果
    float: {
      keyframes: `
        0%, 100% { transform: translateY(0); }
        50% { transform: translateY(-10px); }
      `,
      duration: '3s',
      timing: 'ease-in-out',
      iteration: 'infinite'
    },
    
    bounce: {
      keyframes: `
        0%, 20%, 53%, 80%, 100% { transform: translate3d(0,0,0); }
        40%, 43% { transform: translate3d(0, -10px, 0); }
        70% { transform: translate3d(0, -5px, 0); }
        90% { transform: translate3d(0, -2px, 0); }
      `,
      duration: '1s',
      timing: 'ease-in-out'
    },
    
    shimmer: {
      keyframes: `
        0% { background-position: -200% 0; }
        100% { background-position: 200% 0; }
      `,
      duration: '2s',
      timing: 'ease-in-out',
      iteration: 'infinite'
    },
    
    rotate: {
      keyframes: `
        0% { transform: rotate(0deg); }
        100% { transform: rotate(360deg); }
      `,
      duration: '10s',
      timing: 'linear',
      iteration: 'infinite'
    },
    
    heartBeat: {
      keyframes: `
        0% { transform: scale(1); }
        14% { transform: scale(1.1); }
        28% { transform: scale(1); }
        42% { transform: scale(1.1); }
        70% { transform: scale(1); }
      `,
      duration: '1.3s',
      timing: 'ease-in-out'
    },
    
    // 淡入淡出
    fade: {
      in: {
        from: { opacity: 0 },
        to: { opacity: 1 },
        duration: '300ms',
        timing: 'ease-in-out'
      },
      out: {
        from: { opacity: 1 },
        to: { opacity: 0 },
        duration: '300ms',
        timing: 'ease-in-out'
      }
    },
    
    // 缩放
    scale: {
      in: {
        from: { transform: 'scale(0.95)', opacity: 0 },
        to: { transform: 'scale(1)', opacity: 1 },
        duration: '300ms',
        timing: 'ease-out-quart'
      },
      out: {
        from: { transform: 'scale(1)', opacity: 1 },
        to: { transform: 'scale(0.95)', opacity: 0 },
        duration: '200ms',
        timing: 'ease-in-quart'
      }
    },
    
    // 平移
    slide: {
      upIn: {
        from: { transform: 'translateY(20px)', opacity: 0 },
        to: { transform: 'translateY(0)', opacity: 1 },
        duration: '300ms',
        timing: 'ease-out-quart'
      },
      upOut: {
        from: { transform: 'translateY(0)', opacity: 1 },
        to: { transform: 'translateY(-20px)', opacity: 0 },
        duration: '200ms',
        timing: 'ease-in-quart'
      },
      downIn: {
        from: { transform: 'translateY(-20px)', opacity: 0 },
        to: { transform: 'translateY(0)', opacity: 1 },
        duration: '300ms',
        timing: 'ease-out-quart'
      },
      downOut: {
        from: { transform: 'translateY(0)', opacity: 1 },
        to: { transform: 'translateY(20px)', opacity: 0 },
        duration: '200ms',
        timing: 'ease-in-quart'
      },
      leftIn: {
        from: { transform: 'translateX(-20px)', opacity: 0 },
        to: { transform: 'translateX(0)', opacity: 1 },
        duration: '300ms',
        timing: 'ease-out-quart'
      },
      leftOut: {
        from: { transform: 'translateX(0)', opacity: 1 },
        to: { transform: 'translateX(-20px)', opacity: 0 },
        duration: '200ms',
        timing: 'ease-in-quart'
      },
      rightIn: {
        from: { transform: 'translateX(20px)', opacity: 0 },
        to: { transform: 'translateX(0)', opacity: 1 },
        duration: '300ms',
        timing: 'ease-out-quart'
      },
      rightOut: {
        from: { transform: 'translateX(0)', opacity: 1 },
        to: { transform: 'translateX(20px)', opacity: 0 },
        duration: '200ms',
        timing: 'ease-in-quart'
      }
    },
    
    // 心跳动画
    pulse: {
      keyframes: `
        0% { transform: scale(1); }
        50% { transform: scale(1.05); }
        100% { transform: scale(1); }
      `,
      duration: '1500ms',
      timing: 'ease-in-out',
      iteration: 'infinite'
    },
    
    // 摇摆动画
    shake: {
      keyframes: `
        0%, 100% { transform: translateX(0); }
        10%, 30%, 50%, 70%, 90% { transform: translateX(-5px); }
        20%, 40%, 60%, 80% { transform: translateX(5px); }
      `,
      duration: '600ms',
      timing: 'ease-in-out'
    },
    
    // 呼吸动画
    breathe: {
      keyframes: `
        0% { opacity: 1; }
        50% { opacity: 0.7; }
        100% { opacity: 1; }
      `,
      duration: '2000ms',
      timing: 'ease-in-out',
      iteration: 'infinite'
    }
  }
};

// 导出通用样式类
export const globalStyles = `
  /* 重置样式 */
  * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
  
  html, body {
    font-family: ${themeConfig.typography.fontFamily.regular};
    font-size: ${themeConfig.typography.fontSize.base};
    color: ${themeConfig.colors.neutral.text.primary};
    background-color: ${themeConfig.colors.neutral.background.default};
    line-height: ${themeConfig.typography.lineHeight.normal};
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
  
  /* 通用标题样式 */
  h1 {
    font-size: ${themeConfig.typography.h1.fontSize};
    font-weight: ${themeConfig.typography.h1.fontWeight};
    line-height: ${themeConfig.typography.h1.lineHeight};
    color: ${themeConfig.typography.h1.color};
    margin-bottom: ${themeConfig.spacing.lg};
  }
  
  h2 {
    font-size: ${themeConfig.typography.h2.fontSize};
    font-weight: ${themeConfig.typography.h2.fontWeight};
    line-height: ${themeConfig.typography.h2.lineHeight};
    color: ${themeConfig.typography.h2.color};
    margin-bottom: ${themeConfig.spacing.md};
  }
  
  h3 {
    font-size: ${themeConfig.typography.h3.fontSize};
    font-weight: ${themeConfig.typography.h3.fontWeight};
    line-height: ${themeConfig.typography.h3.lineHeight};
    color: ${themeConfig.typography.h3.color};
    margin-bottom: ${themeConfig.spacing.base};
  }
  
  h4 {
    font-size: ${themeConfig.typography.h4.fontSize};
    font-weight: ${themeConfig.typography.h4.fontWeight};
    line-height: ${themeConfig.typography.h4.lineHeight};
    color: ${themeConfig.typography.h4.color};
    margin-bottom: ${themeConfig.spacing.sm};
  }
  
  h5 {
    font-size: ${themeConfig.typography.h5.fontSize};
    font-weight: ${themeConfig.typography.h5.fontWeight};
    line-height: ${themeConfig.typography.h5.lineHeight};
    color: ${themeConfig.typography.h5.color};
  }
  
  h6 {
    font-size: ${themeConfig.typography.h6.fontSize};
    font-weight: ${themeConfig.typography.h6.fontWeight};
    line-height: ${themeConfig.typography.h6.lineHeight};
    color: ${themeConfig.typography.h6.color};
  }
  
  /* 段落样式 */
  p {
    font-size: ${themeConfig.typography.fontSize.base};
    line-height: ${themeConfig.typography.lineHeight.normal};
    color: ${themeConfig.colors.neutral.text.primary};
    margin-bottom: ${themeConfig.spacing.base};
  }
  
  /* 链接样式 */
  a {
    color: ${themeConfig.colors.primary.base};
    text-decoration: none;
    transition: color ${themeConfig.transitions.duration.base} ${themeConfig.transitions.timing.ease};
  }
  
  a:hover {
    color: ${themeConfig.colors.primary.dark};
  }
  
  /* 列表样式 */
  ul, ol {
    padding-left: ${themeConfig.spacing.md};
    margin-bottom: ${themeConfig.spacing.base};
  }
  
  li {
    margin-bottom: ${themeConfig.spacing.xs};
  }
  
  /* 图片样式 */
  img {
    max-width: 100%;
    height: auto;
  }
  
  /* 输入框样式重置 */
  input, textarea, select {
    font-family: inherit;
    font-size: inherit;
    color: inherit;
    outline: none;
    border: 1px solid ${themeConfig.colors.neutral.border.default};
    border-radius: ${themeConfig.borderRadius.base};
    padding: ${themeConfig.spacing.sm} ${themeConfig.spacing.base};
    transition: border-color ${themeConfig.transitions.duration.base} ${themeConfig.transitions.timing.ease};
  }
  
  input:focus, textarea:focus, select:focus {
    border-color: ${themeConfig.colors.primary.base};
  }
  
  /* 按钮样式重置 */
  button {
    font-family: inherit;
    font-size: inherit;
    color: inherit;
    outline: none;
    border: none;
    background: none;
    cursor: pointer;
    padding: 0;
    transition: all ${themeConfig.transitions.duration.base} ${themeConfig.transitions.timing.ease};
  }
  
  /* 滚动条样式 */
  ::-webkit-scrollbar {
    width: 6px;
    height: 6px;
  }
  
  ::-webkit-scrollbar-track {
    background: ${themeConfig.colors.neutral.background.disabled};
    border-radius: ${themeConfig.borderRadius.base};
  }
  
  ::-webkit-scrollbar-thumb {
    background: ${themeConfig.colors.neutral.border.dark};
    border-radius: ${themeConfig.borderRadius.base};
  }
  
  ::-webkit-scrollbar-thumb:hover {
    background: ${themeConfig.colors.neutral.text.disabled};
  }
  
  /* 通用辅助类 */
  .text-center { text-align: center; }
  .text-left { text-align: left; }
  .text-right { text-align: right; }
  
  .font-bold { font-weight: ${themeConfig.typography.fontWeight.bold}; }
  .font-medium { font-weight: ${themeConfig.typography.fontWeight.medium}; }
  .font-regular { font-weight: ${themeConfig.typography.fontWeight.regular}; }
  
  .text-primary { color: ${themeConfig.colors.primary.base}; }
  .text-secondary { color: ${themeConfig.colors.secondary.base}; }
  .text-success { color: ${themeConfig.colors.success.base}; }
  .text-warning { color: ${themeConfig.colors.warning.base}; }
  .text-error { color: ${themeConfig.colors.error.base}; }
  .text-info { color: ${themeConfig.colors.info.base}; }
  
  .bg-primary { background-color: ${themeConfig.colors.primary.base}; }
  .bg-secondary { background-color: ${themeConfig.colors.secondary.base}; }
  .bg-success { background-color: ${themeConfig.colors.success.base}; }
  .bg-warning { background-color: ${themeConfig.colors.warning.base}; }
  .bg-error { background-color: ${themeConfig.colors.error.base}; }
  .bg-info { background-color: ${themeConfig.colors.info.base}; }
  .bg-paper { background-color: ${themeConfig.colors.neutral.background.paper}; }
  
  .rounded { border-radius: ${themeConfig.borderRadius.base}; }
  .rounded-lg { border-radius: ${themeConfig.borderRadius.lg}; }
  .rounded-full { border-radius: ${themeConfig.borderRadius.full}; }
  
  .shadow { box-shadow: ${themeConfig.shadows.base}; }
  .shadow-lg { box-shadow: ${themeConfig.shadows.lg}; }
  
  .transition { transition: all ${themeConfig.transitions.duration.base} ${themeConfig.transitions.timing.ease}; }
  
  /* 布局辅助类 */
  .flex { display: flex; }
  .flex-col { flex-direction: column; }
  .items-center { align-items: center; }
  .items-start { align-items: flex-start; }
  .items-end { align-items: flex-end; }
  .justify-center { justify-content: center; }
  .justify-between { justify-content: space-between; }
  .justify-around { justify-content: space-around; }
  .gap-xs { gap: ${themeConfig.spacing.xs}; }
  .gap-sm { gap: ${themeConfig.spacing.sm}; }
  .gap-base { gap: ${themeConfig.spacing.base}; }
  .gap-md { gap: ${themeConfig.spacing.md}; }
  .gap-lg { gap: ${themeConfig.spacing.lg}; }
  
  .w-full { width: 100%; }
  .h-full { height: 100%; }
  .flex-1 { flex: 1; }
  
  /* 间距辅助类 */
  .m-0 { margin: 0; }
  .m-xs { margin: ${themeConfig.spacing.xs}; }
  .m-sm { margin: ${themeConfig.spacing.sm}; }
  .m-base { margin: ${themeConfig.spacing.base}; }
  .m-md { margin: ${themeConfig.spacing.md}; }
  .m-lg { margin: ${themeConfig.spacing.lg}; }
  
  .p-0 { padding: 0; }
  .p-xs { padding: ${themeConfig.spacing.xs}; }
  .p-sm { padding: ${themeConfig.spacing.sm}; }
  .p-base { padding: ${themeConfig.spacing.base}; }
  .p-md { padding: ${themeConfig.spacing.md}; }
  .p-lg { padding: ${themeConfig.spacing.lg}; }
`;

// 导出工具函数
export const themeUtils = {
  // 获取主题颜色
  getColor: (colorName, shade = 'base') => {
    const colorPath = colorName.split('.');
    let color = themeConfig.colors;
    
    for (const part of colorPath) {
      if (color && color[part]) {
        color = color[part];
      } else {
        return themeConfig.colors.primary.base; // 默认颜色
      }
    }
    
    // 如果结果是对象且有shade属性，返回对应shade的值
    if (typeof color === 'object' && color[shade]) {
      return color[shade];
    }
    
    return color;
  },
  
  // 获取字体大小
  getFontSize: (sizeName) => {
    return themeConfig.typography.fontSize[sizeName] || themeConfig.typography.fontSize.base;
  },
  
  // 获取间距
  getSpacing: (spacingName) => {
    return themeConfig.spacing[spacingName] || themeConfig.spacing.base;
  },
  
  // 获取圆角
  getBorderRadius: (radiusName) => {
    return themeConfig.borderRadius[radiusName] || themeConfig.borderRadius.base;
  },
  
  // 获取阴影
  getShadow: (shadowName) => {
    return themeConfig.shadows[shadowName] || themeConfig.shadows.base;
  },
  
  // 获取过渡动画
  getTransition: (property = 'all', duration = 'base', timing = 'ease') => {
    const durationValue = themeConfig.transitions.duration[duration] || '300ms';
    const timingValue = themeConfig.transitions.timing[timing] || 'ease';
    return `${property} ${durationValue} ${timingValue}`;
  },
  
  // 获取动画样式
  getAnimation: (animationName) => {
    const animation = themeConfig.animations[animationName];
    if (!animation) return '';
    
    if (animation.keyframes) {
      // 对于需要keyframes的动画，返回animation属性
      return `${animationName} ${animation.duration} ${animation.timing} ${animation.iteration || '1'}`;
    } else {
      // 对于简单的从/到动画，返回transition属性
      return `${Object.keys(animation.from).join(', ')} ${animation.duration} ${animation.timing}`;
    }
  },
  
  // 生成CSS变量
  generateCssVariables: () => {
    const cssVars = {};
    
    // 生成颜色变量
    const generateColorVars = (colors, prefix = '--color') => {
      Object.keys(colors).forEach(key => {
        if (typeof colors[key] === 'object') {
          generateColorVars(colors[key], `${prefix}-${key}`);
        } else {
          cssVars[`${prefix}-${key}`] = colors[key];
        }
      });
    };
    generateColorVars(themeConfig.colors);
    
    // 生成字体变量
    cssVars['--font-family-regular'] = themeConfig.typography.fontFamily.regular;
    cssVars['--font-family-medium'] = themeConfig.typography.fontFamily.medium;
    cssVars['--font-family-bold'] = themeConfig.typography.fontFamily.bold;
    
    // 生成字体大小变量
    Object.keys(themeConfig.typography.fontSize).forEach(key => {
      cssVars[`--font-size-${key}`] = themeConfig.typography.fontSize[key];
    });
    
    // 生成间距变量
    Object.keys(themeConfig.spacing).forEach(key => {
      cssVars[`--spacing-${key}`] = themeConfig.spacing[key];
    });
    
    // 生成圆角变量
    Object.keys(themeConfig.borderRadius).forEach(key => {
      cssVars[`--border-radius-${key}`] = themeConfig.borderRadius[key];
    });
    
    // 生成阴影变量
    Object.keys(themeConfig.shadows).forEach(key => {
      cssVars[`--shadow-${key}`] = themeConfig.shadows[key];
    });
    
    return cssVars;
  },
  
  // 响应式辅助函数
  isMobile: () => {
    return window.innerWidth < parseInt(themeConfig.breakpoints.md);
  },
  
  isTablet: () => {
    const width = window.innerWidth;
    return width >= parseInt(themeConfig.breakpoints.md) && width < parseInt(themeConfig.breakpoints.lg);
  },
  
  isDesktop: () => {
    return window.innerWidth >= parseInt(themeConfig.breakpoints.lg);
  },
  
  // 获取设备类型
  getDeviceType: () => {
    if (window.innerWidth < parseInt(themeConfig.breakpoints.md)) {
      return 'mobile';
    } else if (window.innerWidth < parseInt(themeConfig.breakpoints.lg)) {
      return 'tablet';
    }
    return 'desktop';
  }
};